code:
<div class="grid_A">
<div>
<h3>grayscale()</h3>
<img id="one_" src="../images/1.jpg" alt="" width="20%"/>
<img id="two_" src="../images/1.jpg" alt="" width="20%"/>
<img id="three_" src="../images/1.jpg" alt="" width="20%"/>
</div>
<div>
<h3>blur()</h3>
<img id="four_" src="../images/1.jpg" alt="" width="20%"/>
<img id="five_" src="../images/1.jpg" alt="" width="20%"/>
<img id="six_" src="../images/1.jpg" alt="" width="20%"/>
</div>
</div>
<style>
#one_{filter: grayscale(0);}
#two_{filter: grayscale(0.5);}
#three_{filter: grayscale(1);}
#four_{filter: blur(0vw);}
#five_{filter: blur(0.5vw);}
#six_{filter: blur(1vw);}
</style>
code:
<div class="grid_A">
<div>
<h3>sepia()</h3>
<img id="seven" src="../images/1.jpg" alt="" width="20%"/>
<img id="eight" src="../images/1.jpg" alt="" width="20%"/>
<img id="nine" src="../images/1.jpg" alt="" width="20%"/>
</div>
<div>
<h3>saturate()</h3>
<img id="ten_" src="../images/1.jpg" alt="" width="20%"/>
<img id="eleven_" src="../images/1.jpg" alt="" width="20%"/>
<img id="twelve_" src="../images/1.jpg" alt="" width="20%"/>
</div>
</div>
<style>
#seven_{filter: sepia(0);}
#eight_{filter: sepia(0.5);}
#nine_{filter: sepia(1);}
#ten_{filter: saturate(0);}
#eleven_{filter: saturate(2);}
#twelve_{filter: saturate(4);}
</style>
<div class="grid_A">
<div>
<h3>hue-rotate()</h3>
<img id="thirteen_" src="../images/1.jpg" alt="" width="20%"/>
<img id="fourteen_" src="../images/1.jpg" alt="" width="20%"/>
<img id="fifteen_" src="../images/1.jpg" alt="" width="20%"/>
</div>
<div>
<h3>invert()</h3>
<img id="one" src="../images/1.jpg" alt="" width="20%"/>
<img id="two" src="../images/1.jpg" alt="" width="20%"/>
<img id="three" src="../images/1.jpg" alt="" width="20%"/>
</div>
</div>
<style>
#thirteen_{filter: hue-rotate(0deg);}
#fourteen_{filter: hue-rotate(90deg);}
#fifteen_{filter: hue-rotate(240deg);}
#one{filter: invert(0);}
#two{filter: invert(0.55);}
#three{filter: invert(1);}
</style>
code:
<div class="grid_A">
<div>
<h3>opacity()</h3>
<img id="four" src="../images/1.jpg" alt="" width="20%"/>
<img id="five" src="../images/1.jpg" alt="" width="20%"/>
<img id="six" src="../images/1.jpg" alt="" width="20%"/>
</div>
<div>
<h3>brightness()</h3>
<img id="seven" src="../images/1.jpg" alt="" width="20%"/>
<img id="eight" src="../images/1.jpg" alt="" width="20%"/>
<img id="nine" src="../images/1.jpg" alt="" width="20%"/>
</div>
</div>
<style>
#four{filter: opacity(0.1);}
#five{filter: opacity(0.5);}
#six{filter: opacity(1);}
#seven{filter: brightness(0.2);}
#eight{filter: brightness(1.2);}
#nine{filter: brightness(2.2);}
</style>
code:
<div class="grid_A">
<div>
<h3>contrast()</h3>
<img id="ten" src="../images/1.jpg" alt="" width="20%"/>
<img id="eleven" src="../images/1.jpg" alt="" width="20%"/>
<img id="twelve" src="../images/1.jpg" alt="" width="20%"/>
</div>
<div>
<h3>drop-shadow()</h3>
<img id="thirteen" src="../images/1.jpg" alt="" width="20%"/>
<img id="fourteen" src="../images/1.jpg" alt="" width="20%"/>
<img id="fifteen" src="../images/1.jpg" alt="" width="20%"/>
</div>
</div>
<style>
#ten{filter: contrast(0.2);}
#eleven{filter: contrast(1.2);}
#twelve{filter: contrast(3);}
#thirteen{filter: drop-shadow(0.5vw 0.5vw 0.5vw rgba(0,0,0,0.9));}
#fourteen{filter: drop-shadow(1vw 1vw 1vw rgba(0,0,0,0.9));}
#fifteen{filter: drop-shadow(1.6vw 1.6vw 1vw rgba(0,0,0,0.9));}
</style>
code:
<h3 style="margin-left: -3vw;">summarizing image filters</h3>
<ul class="gridA">
<li><img class="saturate" src="../images/1.jpg?h=150&auto=compress"/>Saturate: <code>filter: saturate(2);</code></li>
<li><img class="hue" src="../images/1.jpg?h=150&auto=compress"/>Hue Rotate: <code>filter: hue-rotate(140deg);</code></li>
<li><img class="invert" src="../images/1.jpg?h=150&auto=compress"/>Invert: <code>filter: invert(.8);</code></li>
<li><img class="greyscale" src="../images/1.jpg?h=350&auto=compress"/>Grayscale: <code>filter: grayscale(1);</code></li>
<li><img class="sepia" src="../images/1.jpg?h=150&auto=compress"/>Sepia: <code>filter: sepia(100%);</code></li>
<li><img class="blur" src="../images/1.jpg?h=350&auto=compress"/>Blur: <code>filter: blur(5px);</code></li>
<li><img class="darken" src="../images/1.jpg?h=350&auto=compress"/>Brightness: <code>filter: brightness(.5);</code></li>
<li><img class="contrast" src="../images/1.jpg?h=350&auto=compress"/>Contrast: <code>filter: contrast(3);</code></li>
<li><img class="all-the-things" src="../images/1.jpg?h=350&auto=compress"/>Combo: <code>filter: contrast(1.4) saturate(1.8) sepia(.6);</code></li>
</ul>
<style>
.greyscale{filter: grayscale(1);-webkit-filter: grayscale(1);}
.sepia{filter: sepia(100%);-webkit-filter: sepia(1);-ms-filter: sepia(100%);}
.blur{filter: blur(5px); -webkit-filter: blur(5px);}
.saturate{filter: saturate(2);-webkit-filter: saturate(2);}
.hue{filter: hue-rotate(140deg);-webkit-filter: hue-rotate(140deg);}
.invert{filter: invert(.8);-webkit-filter: invert(.8);}
.darken{filter: brightness(.5); -webkit-filter: brightness(.5);}
.contrast{filter: contrast(2); -webkit-filter: contrast(2);}
.all-the-things {filter: contrast(1.4) saturate(1.8) sepia(.6);-webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);}
button:hover{filter: opacity(.7); -webkit-filter: opacity(.7); text-shadow: -1px -1px 0px #000;}
/* Remove effect on Hover */
img:hover{filter: none; -webkit-filter: none; }
/* Demo Styling */
img{ max-width: 100%;}
.gridA{ display: grid; grid-template-columns: repeat(5 , 1fr); justify-content: left; list-style: none; margin: 0; padding: 0 2% 2%;text-align: left;}
.gridA li{box-sizing: border-box; padding: 1vw; min-width: 10%; max-width: 25vw; color:blue; }
.gridA li img{ transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;
transform: translateX(0); -webkit-transform: translateX(0);}
</style>
Saturate: 
Grayscale: